<script setup>
import { ref } from 'vue'

const modules = ref([
  {
    id: 1,
    title: '症状记录',
    desc: '记录日常健康症状变化',
    icon: '/static/logo.svg',
    path: '/pages/monitor-reminder/symptom-record'
  },
  {
    id: 2,
    title: '生活习惯记录',
    desc: '记录饮食、运动和作息情况',
    icon: '/static/logo.svg',
    path: '/pages/monitor-reminder/lifestyle-record'
  },
  {
    id: 3,
    title: '健康提醒',
    desc: '设置健康相关的提醒事项',
    icon: '/static/logo.svg',
    path: '/pages/monitor-reminder/health-reminder'
  }
])

const reminderList = ref([
  {
    id: 1,
    title: '服药提醒',
    time: '08:00',
    repeat: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    active: true
  },
  {
    id: 2,
    title: '血压测量',
    time: '07:30',
    repeat: ['周一', '周三', '周五'],
    active: true
  },
  {
    id: 3,
    title: '血糖监测',
    time: '07:00',
    repeat: ['周二', '周四', '周六'],
    active: false
  }
])

const showAddModal = ref(false)
const newReminder = ref({
  title: '',
  time: '08:00',
  repeat: [],
  active: true
})

const weekOptions = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

function toggleReminder(reminder) {
  reminder.active = !reminder.active
  uni.showToast({
    title: reminder.active ? '已开启提醒' : '已关闭提醒',
    icon: 'none'
  })
}

function openAddModal() {
  showAddModal.value = true
  newReminder.value = {
    title: '',
    time: '08:00',
    repeat: [],
    active: true
  }
}

function closeAddModal() {
  showAddModal.value = false
}

function toggleDay(day) {
  const index = newReminder.value.repeat.indexOf(day)
  if (index > -1) {
    newReminder.value.repeat.splice(index, 1)
  } else {
    newReminder.value.repeat.push(day)
  }
}

function navigateTo(path) {
  uni.navigateTo({
    url: path
  })
}

function addReminder() {
  if (!newReminder.value.title) {
    uni.showToast({
      title: '请输入提醒标题',
      icon: 'none'
    })
    return
  }
  
  if (newReminder.value.repeat.length === 0) {
    uni.showToast({
      title: '请选择重复日期',
      icon: 'none'
    })
    return
  }
  
  reminderList.value.push({
    id: Date.now(),
    title: newReminder.value.title,
    time: newReminder.value.time,
    repeat: [...newReminder.value.repeat],
    active: newReminder.value.active
  })
  
  uni.showToast({
    title: '添加成功',
    icon: 'success'
  })
  
  closeAddModal()
}

function deleteReminder(id) {
  const index = reminderList.value.findIndex(item => item.id === id)
  if (index > -1) {
    reminderList.value.splice(index, 1)
    uni.showToast({
      title: '删除成功',
      icon: 'success'
    })
  }
}
</script>

<template>
  <view class="container">
    <view class="header">
      <view class="title">监测提醒</view>
      <view class="subtitle">设置健康监测提醒事项</view>
    </view>
    
    <view class="module-grid">
      <view 
        v-for="module in modules" 
        :key="module.id"
        class="module-item"
        @click="navigateTo(module.path)"
      >
        <view class="module-content">
          <view class="module-title">{{ module.title }}</view>
          <view class="module-desc">{{ module.desc }}</view>
        </view>
        <view class="module-icon">
          <image :src="module.icon" mode="aspectFit" />
        </view>
      </view>
    </view>
    
    <view class="section-title">提醒列表</view>
    
    <view class="reminder-list">
      <view 
        v-for="reminder in reminderList" 
        :key="reminder.id"
        class="reminder-item"
      >
        <view class="reminder-info">
          <view class="reminder-title">{{ reminder.title }}</view>
          <view class="reminder-time">{{ reminder.time }}</view>
          <view class="reminder-repeat">
            <text v-for="(day, index) in reminder.repeat" :key="index">{{ day }}{{ index < reminder.repeat.length - 1 ? '、' : '' }}</text>
          </view>
        </view>
        
        <view class="reminder-actions">
          <switch 
            :checked="reminder.active" 
            color="#1890ff"
            @change="toggleReminder(reminder)"
          />
          <text class="delete-btn" @click="deleteReminder(reminder.id)">删除</text>
        </view>
      </view>
    </view>
    
    <button class="add-btn" @click="openAddModal">添加提醒</button>
    
    <!-- 添加提醒弹窗 -->
    <view v-if="showAddModal" class="modal-mask">
      <view class="modal-content">
        <view class="modal-header">
          <text>添加提醒</text>
          <text class="close-btn" @click="closeAddModal">×</text>
        </view>
        
        <view class="modal-body">
          <view class="form-item">
            <text class="label">提醒标题</text>
            <input class="input" v-model="newReminder.title" placeholder="请输入提醒标题" />
          </view>
          
          <view class="form-item">
            <text class="label">提醒时间</text>
            <picker 
              mode="time" 
              :value="newReminder.time"
              @change="e => newReminder.time = e.detail.value"
            >
              <view class="picker-value">{{ newReminder.time }}</view>
            </picker>
          </view>
          
          <view class="form-item">
            <text class="label">重复</text>
            <view class="week-selector">
              <view 
                v-for="day in weekOptions" 
                :key="day"
                class="day-item"
                :class="{ 'day-selected': newReminder.repeat.includes(day) }"
                @click="toggleDay(day)"
              >
                {{ day.substr(1) }}
              </view>
            </view>
          </view>
          
          <view class="form-item">
            <text class="label">状态</text>
            <switch 
              :checked="newReminder.active" 
              color="#1890ff"
              @change="e => newReminder.active = e.detail.value"
            />
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="cancel-btn" @click="closeAddModal">取消</button>
          <button class="confirm-btn" @click="addReminder">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 40rpx;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.module-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .module-content {
    flex: 1;
  }
  
  .module-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .module-desc {
    font-size: 26rpx;
    color: #666;
  }
  
  .module-icon {
    width: 80rpx;
    height: 80rpx;
    margin-left: 20rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.reminder-list {
  margin-bottom: 40rpx;
}

.reminder-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .reminder-info {
    flex: 1;
    
    .reminder-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .reminder-time {
      font-size: 28rpx;
      color: #1890ff;
      margin-bottom: 10rpx;
    }
    
    .reminder-repeat {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .reminder-actions {
    display: flex;
    align-items: center;
    
    .delete-btn {
      margin-left: 20rpx;
      font-size: 28rpx;
      color: #ff4d4f;
    }
  }
}

.add-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #1890ff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
}

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  width: 80%;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #eee;
  font-size: 32rpx;
  font-weight: bold;
  
  .close-btn {
    font-size: 40rpx;
    color: #999;
  }
}

.modal-body {
  padding: 30rpx;
  
  .form-item {
    margin-bottom: 30rpx;
    
    .label {
      display: block;
      font-size: 28rpx;
      color: #333;
      margin-bottom: 15rpx;
    }
    
    .input {
      width: 100%;
      height: 80rpx;
      border: 1px solid #ddd;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }
    
    .picker-value {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      border: 1px solid #ddd;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }
    
    .week-selector {
      display: flex;
      flex-wrap: wrap;
      
      .day-item {
        width: 80rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 50%;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        font-size: 28rpx;
        
        &.day-selected {
          background-color: #1890ff;
          color: #fff;
          border-color: #1890ff;
        }
      }
    }
  }
}

.modal-footer {
  display: flex;
  border-top: 1px solid #eee;
  
  button {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    border-radius: 0;
    
    &.cancel-btn {
      background-color: #f5f5f5;
      color: #666;
    }
    
    &.confirm-btn {
      background-color: #1890ff;
      color: #fff;
    }
  }
}
</style>